<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="container">
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
			<view class="zy-row-wrap zy-m">
				<view class="zy-column  item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)"
					v-if="tabIndex == 0 || tabIndex == 2">
					<view class='zy-column-end ' style="position: relative; width: 100%; height: 400rpx;">
						<!-- 背景头像 -->
						<image class="zy-pic-bg" style="border-radius: 15rpx 15rpx 0rpx 0rpx;" :src="item.headPicUrl"
							mode="aspectFill"></image>
						<!-- 昵称，形象照 -->
						<view class="zy-column zy-ml" style="z-index: 99;"
							:class="[item.introPicIdUrl && item.introPicIdUrl.length>0 ?'top-has-pic':'']">
							<view class="zy-text-white-lg-bold zy-mb-sm">{{item.nick}}</view>
							<view>
								<image class="zy-img-sm zy-mr-sm" v-for="(item, index) in item.introPicIdUrl"
									:src="item" mode="aspectFill"></image>
							</view>
						</view>
						<!-- 在线 -->
						<view class="zy-row" style="position: absolute; z-index: 99; top: 20rpx; right: 20rpx;"
							v-if="item.onlineStr">
							<view class="zy-dot-green"></view>
							<view class="zy-text-white-sm-super zy-ml-sm">{{item.onlineStr}}</view>
						</view>
					</view>
					<!-- 用户信息，微信，城市 -->
					<view class="zy-column bottom"
						:class="[item.introPicIdUrl && item.introPicIdUrl.length>0?'has-pic':'']">
						<view class="zy-text-whitegrey-sm-super">{{getInfo(item)}}</view>
						<view class="zy-row-between zy-mt-sm">
							<view class="zy-row">
								<image :src="getImageUrl('home_wechat.png')" style="width: 25rpx;" mode="widthFix">
								</image>
								<view class="zy-text-whitegrey-sm-super zy-ml-sm">
									{{$common.getWxStar(item.weChat) || '保密'}}</view>
							</view>
							<view class="zy-row">
								<image :src="getImageUrl('map_blue.png')" style="width: 15rpx;" mode="widthFix"></image>
								<!-- <view class="zy-text-white-sm-super">{{`${item.distance}km`}}</view> -->
								<view class="zy-text-white-sm-super  zy-ml-sm"> {{item.areaStr || '未填写'}}</view>
							</view>
						</view>
					</view>
				</view>


				<view class="item2" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)"
					v-if="tabIndex == 1">
					<image class="avatar" :src="item.headPicUrl" mode="aspectFill"></image>
					<!-- zy-bg-gradient -->
					<view class="zy-column-between zy-p conent-c">
						<view class="zy-row-between-top">
							<!-- 昵称，皇冠，金卡，信息，微信 -->
							<view class="zy-column">
								<view class="zy-text-white-lg-bold">{{item.nick}}</view>
								<view class="zy-row zy-mt-sm">
									<image :src="getImageUrl('ic_crown.png')" style="width: 30rpx;" mode="widthFix"></image>
									<!-- <zy-vip-card class="zy-ml-sm" :type="2" v-if="0==item.vip"></zy-vip-card> -->
								</view>
								<view class="zy-text-white-sm-super zy-mt-sm">{{getInfo(item)}}</view>
								<view class="zy-row zy-mt-sm">
									<image :src="getImageUrl('ic_wx.png')" style="width: 25rpx;" mode="widthFix">
									</image>
									<view class="zy-text-white-sm-super zy-ml-sm">
										{{$common.getWxStar(item.weChat) || '保密'}}</view>
								</view>
							</view>
							<!-- 在线，城市 -->
							<view class="zy-column  zy-mr-lg">
								<view class="zy-row">
									<view class="zy-dot-green"></view>
									<view class="zy-text-white-sm zy-ml-sm">{{item.onlineStr}}</view>
								</view>
								<view class="zy-row zy-mt-sm">
									<image :src="getImageUrl('map_blue.png')" style="width: 15rpx;" mode="widthFix">
									</image>
									<view class="zy-text-white-sm zy-ml-sm">{{item.areaStr || '未填写'}}</view>
								</view>
							</view>
						</view>
						<!-- 形象照 -->
						<view class="zy-row zy-mb-lg">
							<image class="zy-img-lg-rsm zy-mr" v-for="(item, index) in item.introPicIdUrl" :src="item"
								model="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import constant from '@/common/constant.js'
	import IMUtil from "@/main/common/IMUtil.js";
	import RouteUtil from "@/main/common/RouteUtil";
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				dataList: [],
				firstLoaded: false,
				isCurrentPage: false
			}
		},
		onLoad() {
			uni.$on('requestHome', function(data) {
				this.queryList(1, 20);
			})
		},
		onUnload() {
			uni.$off('requestHome')
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								}, 100);
							})
						}
					}
				},
				immediate: true
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								}, 100);
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				if (CacheUtil.getToken()) {
					const params = {
						pageNo: pageNo,
						type: this.tabIndex + 1
					}
					uni.$http.get("/api/user/getUserPage", params)
						.then(res => {
							//将请求的结果数组传递给z-paging
							// this.$refs.paging.complete(this.$common.getDistanceAndOnline(res.data));
							this.$refs.paging.complete(res.data);
							this.firstLoaded = true;
						}).catch(res => {
							this.$refs.paging.complete(false);
						})
				}
			},
			getInfo(item) {
				let info = item.age + "岁";
				if (item.heightStr) {
					info += " " + item.heightStr;
				}
				if (item.weightStr) {
					info += " " + item.weightStr;
				}
				// if (item.careerStr) {
				// 	info += " " + item.careerStr;
				// }
				// if (item.areaStr) {
				// 	info += " " + item.areaStr;
				// }
				return info;
			},
			getInfo2(item) {
				let info = item.age + "岁";
				if (item.heightStr) {
					info += " | " + item.heightStr;
				}
				if (item.weightStr) {
					info += " | " + item.weightStr;
				}
				return info;
			},
			showAddress(item) {
				if (item.areaStr) {
					return true;
				} else {
					return false;
				}
			},
			itemClick(item) {
				RouteUtil.toUserInfo(item.txCode)
			},
			toChat(item) {
				IMUtil.toChat(item.txCode)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.container {
		height: 100%;
	}

	// .tab {
	// 	margin: 15rpx;
	// 	display: flex;
	// 	flex-direction: row;
	// 	flex-wrap: wrap;

	.top-has-pic {
		position: relative;
		bottom: -30rpx;
	}

	.item {
		margin: 15rpx;
		width: 328rpx;
		border-radius: 15rpx;

		.top {
			position: relative;
			width: 100%;
			height: 400rpx;

			.has-pic {
				position: relative;
				bottom: -30rpx;
			}
		}

		.bottom {
			background: #26252B;
			border-radius: 0rpx 0rpx 15rpx 15rpx;
			padding: 25rpx 15rpx 15rpx;

			.has-pic {
				padding-top: 30rpx;
			}
		}
	}


	.item2 {
		position: relative;
		width: 690rpx;
		height: 410rpx;
		margin: 15rpx;

		.avatar {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
			z-index: -1;
		}

		.conent-c {
			width: 100%;
			height: 410rpx;
		}
	}

	// }
</style>